{% extends "./common/base.html" %}
{% block title %}
	商品详情
{% endblock %}
{% block css %}
	<link rel="stylesheet" type="text/css" href="/css/h5/product_detail.css">
{% endblock %}

{% block content %}
	<div class="container">
		<div class="banner">
			<img src="https://cbu01.alicdn.com/img/ibank/2018/932/287/8868782239_23867266.400x400.jpg" alt="">
		</div>
		<div class="product-name">
			{{product.name}}
		</div>
		<div class="product-price">
			<div class="product-price-left">
				<span>¥<i>{{product.discountPrice}}</i>起</span>
				<span class="jianyi">建议零售价：￥100</span>
			</div>
			<div class="product-price-right">
				<p>{{product.factoryDes}}</p>
				<p>{{product | productType}}</p>
			</div>
		</div>
		<div class="title">
			<div class="title-line"></div>
			<div class="title-text">生产说明</div>
			<div class="title-line"></div>
		</div>
		<div class="desc-section">
			<div class="desc-item">
				<div class="desc-item-left">生产数量</div>
				<div class="desc-item-right">
					{% for item in (product.discountsConfig | jsonParse) %}
                        {% if item.min and item.max %}
                            <div class="desc-item-option">{{item.min}}件 - {{item.max}}件</div>
                        {% elif item.min and not item.max %}
                            <div class="desc-item-option">{{item.min}}件以上</div>
                        {% elif not item.min and item.max %}
                            <div class="desc-item-option">{{item.max}}件以下</div>
                        {% endif %}
                    {% endfor %}
				</div>
			</div>
			<div class="desc-item">
				<div class="desc-item-left">预估生产周期</div>
				<div class="desc-item-right">
					{% for item in product.discountsConfig | jsonParse %}
                        <div class="desc-item-option desc-item-option-block">  {{ item.cycle + "天" if item.cycle else "现货"}}</div>
                    {% endfor %}
				</div>
			</div>
			<div class="desc-item">
				<div class="desc-item-left">近90天生产</div>
				<div class="desc-item-right">
					{% for item in product.discountsConfig | jsonParse %}
                        <div class="desc-item-option">{{item.discount  |  formatDiscount}}</div>
                    {% endfor %}
				</div>
			</div>
			<div class="desc-item">
				<div class="desc-item-left">物流</div>
				<div class="desc-item-right-text">
					发货地{{product.fromCity}} 快递费{{product.unitFreight}}元/件 最低{{product.unitFreight * product.minCount}}元
				</div>
			</div>
		</div>
		<div class="title">
			<div class="title-line"></div>
			<div class="title-text">生产说明</div>
			<div class="title-line"></div>
		</div>
		<div class="rate-section">
			<div>
				<p>{{rate.userName}}：非常漂亮</p>
				<p class="stars">
					<img src="/img/star_icon.png">
					<img src="/img/star_icon.png">
					<img src="/img/star_icon.png">
					<img src="/img/star_icon.png">
					<img src="/img/star_icon.png">
				</p>
			</div>
			<div>
				<p>采购数量1.1万</p>
				<p>{{rate.createdTime | formatDateTime("YYYY-MM-DD h:m")}}</p>
			</div>
			<div class="btn-group">
				<a class="rate-btn" href="/h5/rate/{{productId}}">查看全部</a>
			</div>
		</div>
		<div class="title">
			<div class="title-line"></div>
			<div class="title-text">商品规格</div>
			<div class="title-line"></div>
		</div>
		<div class="standars-section">
			{% for item in descs %}
				{% for option in item %}
	                <div class="standars-item">
	                    <p class="standars-item-left">{{option | getKey}}</p>
	                    <p class="standars-item-right">{{option | getValue}}</p>
	                </div>
	            {% endfor %}
            {% endfor %}
		</div>
		<div class="title">
			<div class="title-line"></div>
			<div class="title-text">图文详情</div>
			<div class="title-line"></div>
		</div>
		<div class="img-content">
			{% for item in product.images.split(",") %}
				<div>
					<img src="{{item}}">
				</div>
            {% endfor %}
		</div>
		<div class="footer-btn">
			<div class="btn btn-left">在线咨询</div>
			<div id="submit" class="btn btn-right" href="">立即下单</div>
		</div>
		<div class="modal">
			<div class="modal-content">
				<div class="modal-title">
					类型：
				</div>
				<div class="type-group">
					{% if product.isTp %}
						<div data-type="TP" class="type-item type-item-active">
							<span>贴牌</span>
						</div>
                    {% endif %}
                    {% if product.isPf %}
                        <div data-type="PF" class="type-item">
							<span>批发</span>
						</div>
                    {% endif %}
				</div>
				<p class="modal-price">单价：￥<span class="unit-price"></span>/件</p>
				<div class="modal-title">
					数量：
				</div>
				<div class="input-group">
					<input id="quantity" type="text">
					<span>件({{product.minCount}}件起订)</span>
					<p class="error" id="quantity-error"></p>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block script %}
	<script type="text/javascript" src="/js/h5/product_detail.js"></script>
{% endblock %}










